<script setup lang="ts">
import {onLoad, onShow} from "@dcloudio/uni-app";
import {onMounted, ref,watchEffect} from "vue";
import {formatTimestamp} from '@/utils/date'
import {list} from "@/api/activity";
import {count} from '@/api/menuorder'
import {loginUrl,userinfoget} from '@/api/appuser'
import { baseUrl } from "@/api/request";
const visitTime = ref()
onLoad((params)=>{
  getUser()
  uni.getStorage({key:'visitTime'}).then(res=>{
    visitTime.value=res.data
  }).catch(err=>{
    visitTime.value = formatTimestamp(new Date())
    uni.setStorage({
      key:'visitTime',
      data:visitTime.value
    })
  });
  uni.getStorage({
    key:'shopId',
    success: function (res)  {
      if(res.data){
        getNoHandle(parseInt(res.data))
      }
    },
    fail:function (res) {
    }
  })
  getFirst()
  getCoupon()
  getPingTuan()
})
const getNoHandle=(shopId)=>{
  count({"orderStatusList":['1','2','3'],"shopId":shopId}).then(res=>{
    receiveOrderTotal.value = res.data
  })
}
const pingtuan = ref()
const getPingTuan=()=>{
  list({"type":"3"}).then(res=>{
    pingtuan.value=res.data[0];
  })
}
const first = ref()
const getFirst=()=>{
  list({"type":"0"}).then(res=>{
    first.value=res.data[0];
  })
}
const coupon = ref()
const couponTotal = ref(0)
const getCoupon=()=>{
  list({"type":"2"}).then(res=>{
    coupon.value=res.data.filter(item=>item.userActivityId == null);
    couponTotal.value=coupon.value.length;
  })
}
const login=ref(true)
const goInfo=()=>{
  uni.navigateTo({
    url:'/pages/my/info'
  })
}
const exchangerecordBtn=()=>{
  uni.navigateTo({
    url:'/pages/my/exchangerecords'
  })
}
const toCoupon=()=>{
  uni.navigateTo({
    url:"/pages/my/coupon"
  })
}
const receiveOrderTotal = ref(0)
const toReceiveOrder=()=>{
  uni.navigateTo({
    url:"/pages/my/receiveorder"
  })
}
const userinfo=ref()
const loginRef=ref()
const loginBtn=()=>{
	loginRef.value.open('bottom')
}

let userInfo=
{avatar :'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
			  nickName:'',wxCode:'',phone:'',phoneCode:'',shopId:''}
const getPhoneNumber=(e)=>{
	userInfo.phoneCode=e.detail.code
	handleWxLogin()			
}
const getnickname=(e)=>{
	userInfo.nickName=e.detail.value;
}
const avatarUrl=ref("https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0")
const onChooseAvatar=(e)=>{
	userInfo.avatar = wx.getFileSystemManager().readFileSync(e.detail.avatarUrl,'base64')
	avatarUrl.value=e.detail.avatarUrl
}
const handleWxLogin=()=>{
	userInfo.shopId=uni.getStorageSync('shopId')
	if (userInfo.avatar === "") {
	  uni.showToast({
	  	title:'请选择您的头像'
	  })
	  return
	} else if (userInfo.nickName === "") {
	  uni.showToast({
	  	title:'请输入您的昵称'
	  })
	  return
	} else {
	  wx.login({
		success (res) {
			console.log("dataL"+JSON.stringify(res))
			console.log("code:"+res.code)
		  if (res.code) {
			userInfo.wxCode = res.code;
			//发起网络请求
			pwdLogin()
		  } else {
			console.log('登录失败！' + res.errMsg)
		  }
		}
	  })
	}
}
const user=ref()
// 微信授权信息登录
const  pwdLogin=async()=>{
  loginUrl(userInfo).then(res=>{
	  if(res.code === 200){
		  uni.setStorage({
		  	key:"token",
			data:res.data,
			success() {
				getUser()
				loginRef.value.close()
			}
		  })
		  
	  }
  })
}
const getUser=()=>{
	userinfoget({}).then(res2=>{
		  if(res2.code === 200 && res2.data){
			  user.value=res2.data;
		  }
	})
}
const firstStep=ref(true)
const goNextStep=()=>{
	if (userInfo.avatar === "") {
	  uni.showToast({
	  	title:'请选择您的头像'
	  })
	  return
	} else if (userInfo.nickName === "") {
	  uni.showToast({
	  	title:'请输入您的昵称'
	  })
	  return
	} 
	firstStep.value=false
}
const goLastStep=()=>{
	firstStep.value=true
}
const cancelLogin=()=>{
	loginRef.value.close()
}
</script>

<template>
  <view class="uni-container-my">
	  <view v-if="user"  class="uni-container-my">
		  <view class="user-title-real">
		  	<image :src="baseUrl+user.avatar" class="avatar"></image>
		  	<view class="user-name-real">
		  	  <text style="color: #CCCC66;font-weight: bold;">{{user.nickName}}</text>
		  	  <text style="color: #675F54;">当前积分：{{user.points ? user.points : 0}}</text>
		  	</view>
		  	<view class="user-name-btn">
		  	  <text style="color:#675F54" @click="exchangerecordBtn">兑换记录</text>
		  	  <text style="color: burlywood;" @click="goInfo">会员资料</text>
		  	</view>
		    </view>
		    <view class="juan"  v-if="user && first">
				<view  class="juan-title">
				  <text>{{first.name}}</text>
				</view>
				<view class="juan-text">
				  <text style="font-weight: bolder">{{first.content}}</text>
				  <text style="color: #675F54"  v-if="first.userActivityId == null">未使用</text>
				  <text style="color: #675F54" v-else>已使用</text>
				</view>
		    </view>
		    <view class="tuangou"  v-if="login && pingtuan">
				<view  class="tuangou-title">
				  <text>{{pingtuan.name}}</text>
				</view>
				<view class="tuangou-text">
				  <text>满{{pingtuan.groupBuyingPersons}}人打{{pingtuan.discount}}折</text>
				</view>
		    </view>
		    <view class="my-juan"  v-if="login"  @click="toCoupon">
				<view style="width: 80%"><text  style="color: #566B4C;font-weight: bolder;
			  font-size: 16px;">我的优惠券</text></view>
				<view v-if="couponTotal > 0">
				  <text style="color: #D1BF70;font-size: 12px;">
				  {{couponTotal}} 张待使用</text>
				</view>
				<view style="text-align: right;">
				  <text style="color: #675F54;padding-right: 15px;font-size: 12px;">查看</text></view>
		    </view>
		    <view class="my-juan"  v-if="login"  @click="toReceiveOrder">
		    <view style="width: 80%"><text  style="color: #566B4C;font-weight: bolder;
		  font-size: 16px;">收到的订单</text></view>
		    <view v-if="receiveOrderTotal > 0">
		  	<text style="color: #a8a8a8;font-size: 12px;">
		  	{{receiveOrderTotal}} 单待处理</text>
		    </view>
		    <view style="text-align: right;">
		  	<text style="color: #675F54;padding-right: 15px;font-size: 12px;">查看</text></view>
		    </view>
	  </view>
	  <view  class="uni-container-my"   v-else>
		  <view class="login-to-do" @click="loginBtn">
		  		<text style="color: #5A5127;margin-left: 6px;">点击登录，享受专属会员及积分</text>
		  		<uv-button   size="mini" type="primary" class="login-btn-text">登录</uv-button>
		  </view>
	  </view>
	  <uni-popup ref="loginRef"  background-color="#fff">
		  <view class="popup-content" >
			 <view class="login">
				 <view v-if="firstStep"  class="login">
					 <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						 <image class="avatar-wrapper-image" mode="scaleToFill" :src="avatarUrl"></image>
					 </button> 
					 <input type="nickname"  @blur="getnickname" v-model="userInfo.nickName" class="weui-input" placeholder="请输入昵称"/>
					 <view style="display: flex;align-items: center;justify-content: center;width: 100%;">
						 <uv-button @click="handleWxLogin" size="mini"  type="primary" text="提交"></uv-button>&nbsp;&nbsp;
						 <uv-button @click="cancelLogin" size="mini" text="取消"></uv-button>
					 </view>
				 </view>
				 <view v-else  class="login" v-if="false">
					 <button  size="mini" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
					 <view  style="display: flex;align-items: center;justify-content: center;width: 100%;">
						 <uv-button @click="goLastStep"  size="mini"  type="primary"  text="上一步"></uv-button>&nbsp;&nbsp;
						 <uv-button @click="cancelLogin" size="mini"  text="取消"></uv-button>
					 </view>
				 </view>
			 	</view>
		  </view>
	  </uni-popup>
  </view>
</template>

<style scoped lang="scss">
.login{
	 text-align: center;
	 display: flex;
	 flex-direction: column;
	 justify-content: space-around;
	 align-items: center;
	 height: 100%;
	 width: 100%;
}
.avatar-wrapper{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px;
}
.avatar-wrapper-image{
	width:40px;
	height:40px;
}
.avatar{
	height: 60px;
	width: 60px;
}
.weui-input{
	text-align: center;
	width: 100px;
	height: 20px;
	margin-bottom: 10px;
}
.popup-content {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-direction: column;
	height: 250px;
	background-color: #fff;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.my-juan{
  border-radius: 3px;
  align-items: center;
  background-color: whitesmoke;
  display: flex;
  justify-content: space-evenly;
  font-size: 14px;
  height: auto;
  width: 93%;
  margin-top: 2px;
  padding: 5px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.my-juan view{
  padding-left: 5px;
  width: 33%;
  text-align: left;
}
.tuangou-text{
  margin-top: 10px;
  color: #D1BF70;
  font-size: 35px;
  //transform: skewX(-20deg) scale(0.9);
  font-weight: bolder;
}
.tuangou-title{
  width: 97%;
  color: #5A5127;
  position: absolute;
  top: 3px;
}
.tuangou{
  position: relative;
  border-radius: 3px;
  align-items: center;
  background-color: whitesmoke;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 12px;
  height: 13%;
  width: 93%;
  padding: 5px;
  margin-top: 2px;
}
.juan-title{
  width: 97%;
  margin-bottom: 5px;
  color: #5A5127;
}
.juan-text{
  color: #566B4C;
  background-color: #aaaa7f;
  width: 93%;
  margin-bottom: 5px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border-radius: 5px;
}
.juan{
  border-radius: 3px;
  align-items: center;
  background-color: whitesmoke;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 12px;
  height: auto;
  width: 93%;
  margin-top: 2px;
  padding: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.login-btn-text{
  background-color: #D1BF70;
  color: #566B4C;
  margin-right: 8px;
}
.login-to-do{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  background-color: whitesmoke;
  height: 10%;
  width: 93%;
  margin-top: 2px;
  border-radius: 5px;
  padding-right: 10px;
  padding-left: 5px;
}
.user-name-real{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
  width: 60%;
}
.user-title-real{
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: whitesmoke;
  font-weight: normal;
  font-size: 12px;
  height: 12vh;
  width:  93%;
  margin-top: 2px;
  border-radius: 5px;
  padding: 5px;
}
.user-name-btn{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
}
.avatar{
  width: 40px;
  height: 40px;
  border-radius: 50px;
  margin-right: 5px;
}
.user-title{
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #667E5A;
  font-weight: normal;
  font-size: 12px;
  height: 10vh;
  width: 93%;
  margin-top: 2%;
}
.user-name{
  display: flex;
  align-items: center;
}
.user-name text{
  margin-right: 15px;
}
.uni-container-my{
  width: 100%;
  height: 100%;
  display: flex; /* 使用flex布局可能有助于高度分配 */
  flex-direction: column; /* 垂直方向排列子元素 */
  align-items: center;
  background-color: #C9B9AA;
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  border-radius: 5px;
}
</style>